<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        li{
            list-style: none;
            float: left;
            width: 200px;
            background-color: #108881;
            padding: 10px;
            text-align: center;

        }
        img{
            width: 200px;
            height: 300px;
        }
        div{
            float: left;
        }
        .box{
            display: inline-block;
            width: 1100px;
            background-color: pink;
            text-align: center;
        }

    </style>
</head>
<body>
    <!-- 
            float
        父级边框塌陷
        clear：
        right：右侧不允许有浮动元素
        left：左侧不允许有浮动元素
        both：两侧不允许有浮动元素
        none：
     -->
    <span class="box">
        <div><img src="../images/4.webp" alt=""></div>
        <ul>
           <li><img src="../images/1.webp" alt=""></li>
           <li><img src="../images/2.webp" alt=""></li>
           <li><img src="../images/3.webp" alt=""></li>
        </ul>
        <div><img src="../images/5.webp" alt=""></div>
    </span>

    <!-- 
        解决父级边框塌陷的方法：
    方案一：增加父级元素的高度；
    方案二：增加一个空的div标签，清除浮动
     -->
     <!-- 
        <div class = "clear"></div>
        <style>
	        .clear{
		        clear:both;
		        margin:0;
		        padding:0;
            }
        </style>
 
      -->
      <!-- 
        方案三:在父级元素中增加一个overflow：hidden
        overflow:hidden/*隐藏*/
        overflow：scoll/*滚动*/
       -->
       <!-- 
        方案四：父类添加一个伪类:after
        
        #father:after{
        	content:'';
        	display:block;
        }
        -->

        <!-- 

            浮动元素增加空div----》简单、代码尽量避免空div
            设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
            overflow----》简单，下拉的一些场景避免使用
            父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用
            display：方向不可以控制
            float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。
         -->
</body>
</html>